<template>
	<!-- 下拉选择表单 + 分页 -->

	<el-popover
		v-model="showPopover"
		placement="bottom"
		size="mini"
		:width="popoverWidth"
	>
		<el-input
			ref="filterRef"
			size="mini"
			slot="reference"
			v-model="filterValue"
			@input="onFilterInput"
			placeholder="请选择"
		/>
		<div>
			<div
				v-for="option in optionsAfterFilter"
				:key="option[valueKey]"
				class="pil-2 option option--able"
				@click="onOptionClick(option)"
			>
				{{ option[labelKey] }}
			</div>

			<div v-show="optionsAfterFilter.length == 0" class="pil-2 c9 option">
				暂无选项
			</div>
		</div>
	</el-popover>
</template>

<script>
export default {
	props: {
		options: {
			type: Array,
			required: true
		},
		valueKey: {
			type: String,
			default: 'value'
		},
		labelKey: {
			type: String,
			default: 'text'
		},

		value: {
			type: [Number, String],
			required: true
		}
	},
	data() {
		return {
			popoverWidth: '100',
			showPopover: false,
			filterValue: '',
			optionsAfterFilter: []
		}
	},
	computed: {},
	created() {
		this.optionsAfterFilter = this.options.slice(0)
	},
	mounted() {
		this.popoverWidth = this.$refs.filterRef.$el.offsetWidth
	},
	methods: {
		// 选中
		onOptionClick(option) {
			this.filterValue = option[this.labelKey]
			this.value = option[this.valueKey]
			this.$emit('input', this.value)
			this.$emit('change', this.value)
			this.showPopover = false
		},
		// 输入
		onFilterInput(value) {
			this.optionsAfterFilter = this.options.filter((option) =>
				option[this.labelKey].includes(value)
			)
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.option {
	line-height: 2.6;
	font-size: 12px;
	&--able {
		cursor: pointer;
		&:hover {
			background-color: #f2f5fc;
		}
	}
}
</style>
